<template>
  <div class="header-components">
    <div class="header-wrapper">
      <el-row>
        <el-col :xs="{ span: 12 }" :sm="{ span: 15 }" :lg="{ span: 10 }" class="logo-wrapper">
          <div class="logo">
            <img src="../assets/img/company-logo.png" @click="navToCompass()" alt="logo" class="logo-image">
            <span class="slogan">GMALL智慧零售运营平台</span>
          </div>
        </el-col>
        <el-col :sm="{ span: 7, offset: 2 }" :lg="{ span: 5, offset: 9 }" class="op-container hidden-xs-only">
          <el-row class="op-wrapper" :gutter="20">
            <el-col :span="11" class="op-item">
              <el-dropdown class="pointer-link" style="color:#888; font-size:12px" trigger="click" @command="changeShopId">
                <span class="el-dropdown-link op-item">
                  <!-- {{mallId}} -->
                  {{defaultShopName}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in shopList" :command="item.id" :key="item.id">{{item.name}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="5" class="op-item">
              <span class="pointer-link">{{ userinfo.username }}</span>
            </el-col>
            <el-col :span="4" class="op-item">
              <span @click="() => { notificationTableVisible = true }" class="pointer-link">通知</span>
            </el-col>
            <el-col :span="4" class="op-item logout-item">
              <span @click="logout" class="pointer-link">退出</span>
            </el-col>
          </el-row>
        </el-col>
        <!-- 汉堡下拉菜单 在xs(<768px)时候显示 -->
        <el-col :xs="{ span: 12 }" class="hidden-sm-and-up menu-btn-dropdown">
          <!-- icon 菜单按钮 -->
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-menu icon-menu"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>{{ userinfo.username }}</el-dropdown-item>
              <el-dropdown-item divided>
                <router-link to="compass" class="nav-menu-link">实时罗盘</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="history" class="nav-menu-link">历史数据</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="trajectory" class="nav-menu-link">动线分析</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="customer" class="nav-menu-link">客群管理</router-link>
              </el-dropdown-item>
              <el-dropdown-item>店铺管理</el-dropdown-item>
              <!-- <el-dropdown-item divided>系统管理</el-dropdown-item> -->
              <el-dropdown-item divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="notificationTableVisible" width="950px">
      <el-table :data="currMallNotifications">
        <el-table-column property="created_at" width="200" label="通知时间"></el-table-column>X
        <el-table-column width="150" label="通知类型">
          <template slot-scope="scope">{{ scope.row.type === 1 ? '客流预警' : '一般通知' }}</template>
        </el-table-column>
        <el-table-column property="message" label="通知内容"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { Row, Col, Dropdown, DropdownMenu, DropdownItem, Dialog, Table, TableColumn } from 'element-ui'
import { APIGmallLogout, APIGetMallInfo } from '@/api/system.js'
import { mapGetters } from 'vuex'
// 更换默认门店
import { APIChangeShopId } from '@/api/settings.js'

export default {
  name: 'header-components',

  components: {
    elRow: Row,
    elCol: Col,
    elDropdown: Dropdown,
    elDropdownMenu: DropdownMenu,
    elDropdownItem: DropdownItem,
    elDialog: Dialog,
    elTable: Table,
    elTableColumn: TableColumn
  },

  data () {
    return {
      notificationTableVisible: false
    }
  },

  created () {
    // init request
    // APIChangeShopId({ shop: 1 })
  },
  computed: {
    ...mapGetters([
      'userinfo',
      'currMallNotifications',
      'mallinfo',
      'mallId'
    ]),
    shopList () {
      return this.mallinfo.shopNameList
    },
    defaultShopName () {
      return this.shopList.filter(item => item.id === Number(this.mallId))[0].name
    }
  },

  methods: {
    navToCompass () {
      this.$router.push({name: 'compass'})
    },
    changeShopId (command) {
      this.$store.dispatch('setmallId', command)
      // 设置默认门店
      APIChangeShopId({ shop: this.mallId })
        .then((res) => {
          // 重新拉取该shopid对应的信息
          APIGetMallInfo(this.mallId)
            .then((res) => {
              this.$store.dispatch('setOpenningHours', res.data.shop.openning_hours)
              this.$store.dispatch('setMallMapData', res.data.shop.zones)
              this.$store.dispatch('setMallMapScale', res.data.shop.scale)
              this.$store.dispatch('setMallMapBg', res.data.shop.ichnography)
            })
            .then(() => {
              console.log('this!!!!!!!!1:', this)
              // 跳转页面
              let currentRouteName = this.$router.history.current.name
              if (currentRouteName === 'compass') {
                this.$router.go(0)
              } else {
                this.$router.push({ name: 'compass' })
              }
            })
        })
    },
    logout () {
      APIGmallLogout()
        .then(() => {
          this.$store.dispatch('removeToken')
          this.$store.dispatch('clearUserInfo')
          this.$store.dispatch('clearMallInfo')
          this.$store.dispatch('removeRole')
          // this.$router.push({ name: 'login' })
        })
        .then(() => {
          location.reload()// In order to re-instantiate the vue-router object to avoid bugs
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .header-components {
    .header-wrapper {
      .logo-wrapper {
        margin-top: 5px;
        color: #FFF;
        font-size: 25px;
        line-height: 30px;
        .logo {
          width: 100%;
          height: 40px;
          .logo-image {
            float: left;
            width: auto;
            margin-top: 2px;
            height: 40px;
            cursor: pointer;
          }
          .slogan {
            float: left;
            position: relative;
            margin-left: 20px;
            font-size: 16px;
            line-height: 50px;
            &:after {
              content: '';
              display: block;
              position: absolute;
              top: 50%;
              left: -10px;
              width: 1px;
              height: 20px;
              border-right: 1px solid #FFF;
              transform: translateY(-50%);
              background-color: transparent;
              border-radius: 50%;
            }
          }
        }
      }
      .nav-menu-wrapper, .op-wrapper {
        margin-top: 15px;
        color: #888;
        font-size: 12px;
        line-height: 30px;
        .nav-menu-item {
          text-align: center;
          .nav-menu-link {
            text-decoration: none;
            color: #888;
            &:hover {
              color: #FFF;
            }
            &.nav-active-link {
              color: #FFF;
            }
          }
        }
        .op-item {
          text-align: right;
          &:hover {
            color: #FFF;
          }
          .pointer-link{
            cursor: pointer;
          }
        }
      }
      .menu-btn-dropdown {
        margin-top: 15px;
        color: #FFF;
        font-size: 20px;
        line-height: 30px;
        text-align: right;
        .el-dropdown-link {
          color: #FFF;
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
  }
  // element-ui 修改
  .el-dropdown-menu {
    .nav-menu-link {
      text-decoration: none;
      &:hover {
        color: #888;
      }
    }
  }
</style>
